<template>
  <div class="drop-cont">
    <Dropdown :trigger="trigger">
      <span class="drop-title"> 排序方式 <DownOutlined style="color: #999" /> </span>
      <template #overlay>
        <Menu @click="handleMenu" :selected-keys="selectKeys" overlayClassName="sort-node">
          <MenuItem v-for="item in sortList" :key="item.id">
            <div class="sort-item">
              {{ item.name }}
            </div>
          </MenuItem>
        </Menu>
      </template>
    </Dropdown>
    <div class="layout-icons" :class="{ active: layOut == 'grid' }">
      <span class="item-icons" @click="handleTap('list')"
        ><UnorderedListOutlined :style="{ color: layOut === 'list' ? '#2B63A1' : '' }"
      /></span>
      <span class="item-icons" @click="handleTap('grid')"
        ><AppstoreOutlined :style="{ color: layOut === 'grid' ? '#2B63A1' : '' }"
      /></span>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, PropType } from 'vue';
  import { Dropdown, Menu, MenuItem } from 'ant-design-vue';
  import { DownOutlined, UnorderedListOutlined, AppstoreOutlined } from '@ant-design/icons-vue';

  type ActiveType = 'list' | 'grid';
  type TriggerType = 'click' | 'hover' | 'contextmenu';

  const sortList = ref([
    { name: '名称', id: '1' },
    { name: '修改日期', id: '2' },
    { name: '类型', id: '3' },
    { name: '大小', id: '4' },
  ]);

  const $props = defineProps({
    selectKeys: {
      type: Array as PropType<string[] | number[]>,
      default: () => [],
    },
    layOut: {
      type: String as PropType<ActiveType>,
      default: 'list',
    },
    trigger: {
      type: String as PropType<TriggerType>,
      default: 'hover',
    },
  });

  const $emit = defineEmits([
    'change-dropdrow',
    'change-layout',
    'update:selectKeys',
    'update:layOut',
  ]);

  const handleTap = (type: ActiveType) => {
    if (type === $props.layOut) return;

    $emit('change-layout', type);
    $emit('update:layOut', type);
  };

  const handleMenu = (data) => {
    if ($props.selectKeys.includes(data.key as never)) return;

    $emit('change-dropdrow', data.key);
    $emit('update:selectKeys', [data.key]);
  };
</script>

<style lang="less" scoped>
  .flex {
    display: flex;
    align-items: center;
  }

  .drop-cont {
    justify-content: flex-end;
    padding-left: 24px;
    padding-right: 16px;
    .flex();

    .drop-title {
      cursor: pointer;
      font-size: 14px;
      color: #333;
    }

    .layout-icons {
      .flex();
      background: #f2f3f5;
      border-radius: 8px;
      margin-left: 16px;
      position: relative;

      &::before {
        transition: all 0.2s ease;
        content: '';
        display: block;
        width: 64px;
        height: 100%;
        border-radius: 8px;
        background: #e8ecf1;
        position: absolute;
        left: 0;
        top: 0;
      }

      .item-icons {
        position: relative;
        z-index: 2;
        width: 64px;
        padding: 8px;
        text-align: center;
        cursor: pointer;
        color: #333;

        span.anticon:not(.app-iconify) {
          margin-right: 0;
        }
      }
    }

    .active {
      &:before {
        left: 64px;
      }
    }
  }
</style>
<style>
  .ant-dropdown-menu[overlayclassname='sort-node'] {
    padding: 0;
    min-width: 140px;
  }

  .ant-dropdown-menu[overlayclassname='sort-node'] .ant-dropdown-menu-item {
    border-radius: 0;
  }

  .ant-dropdown-menu[overlayclassname='sort-node'] .ant-dropdown-menu-item-selected {
    background-color: #f4f7fa;
  }
</style>
